<template>
  <q-page style="width: 90vw; padding-bottom: 2rem;">
    <grid-layout
      v-model:layout="layout"
      :col-num="12"
      :row-height="30"
      :vertical-compact="true"
      :responsive="responsive"
      @layout-updated="layoutUpdatedEvent"
    >
      <grid-item
        v-for="item in layout"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
      >
        <template v-if="item.i == '0'">
          <outgoing-record mode="dashboard"></outgoing-record>
        </template>

        <template v-if="item.i == '1'">
          <spare-availability></spare-availability>
        </template>

        <template v-if="item.i == '2'">
          <overhaul-index></overhaul-index>
        </template>

        <template v-if="item.i == '3'">
          <long-outstanding></long-outstanding>
        </template>

        <template v-if="item.i == '4'">
          <incident-repair-summary></incident-repair-summary>
        </template>

        <template v-if="item.i == '5'">
          <critical-hard-time-replacement></critical-hard-time-replacement>
        </template>
        <template v-if="item.i == '6'">
          <long-outsta></long-outsta>
        </template>
        <!-- <template v-if="item.i == '7'">
          <mean-time></mean-time>
        </template> -->
        
      </grid-item>
    </grid-layout>
    <!-- </template> -->
    <!--  </q-splitter> -->
  </q-page>
</template>

<style scoped>
.file-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.file-table th,
.file-table td {
  padding: 12px;
  border-bottom: 1px solid #ccc;
}

.file-table th {
  text-align: left;
  font-weight: bold;
}

.file-table tbody tr:hover {
  background-color: #f5f5f5;
}
</style>

<script setup lang="ts">
import { ref, provide, onMounted } from 'vue';
// import { Notify } from 'quasar';
import { useDrawer } from 'src/stores/drawer';
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css';
// import VueDraggableResizable from 'vue-draggable-resizable';
import { GridLayout, GridItem } from 'vue3-grid-layout-next';
import { UseMainStore } from 'src/stores/store';
const mainStore = UseMainStore();
mainStore.updateTitle('');

const responsive = ref(true);
const layout = ref([
  { x: 0, y: 0, w: 10, h: 14, i: '0' },
  { x: 0, y: 1, w: 10, h: 14, i: '1' },
  { x: 0, y: 2, w: 10, h: 14, i: '2' },
  { x: 0, y: 3, w: 10, h: 14, i: '3' },
  { x: 0, y: 4, w: 10, h: 14, i: '4' },
  { x: 0, y: 5, w: 10, h: 14, i: '5' },
  { x: 0, y: 6, w: 10, h: 14, i: '6' },
  // { x: 0, y: 7, w: 10, h: 14, i: '7' },
]);

import { useInputOption } from 'src/stores/inputOptionStore';
// import * as echarts from 'echarts';
import { use, registerMap } from 'echarts/core';
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
import {
  PieChart,
  LineChart,
  BarChart,
  SunburstChart,
  MapChart,
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  // SingleAxisComponent,
  ToolboxComponent,
  AxisPointerComponent,
  VisualMapComponent,
  GeoComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import OutgoingRecord from 'src/components/reportTable/OutgoingRecord.vue';
import LongOutsta from 'src/components/dashboard/LongOutsta.vue';
import { outgoingRecord } from 'src/services/reportService';
import SpareAvailability from 'src/components/dashboard/SpareAvailability.vue';
import OverhaulIndex from 'src/components/dashboard/OverhaulIndex.vue';
import LongOutstanding from 'src/components/dashboard/LongOutstanding.vue';
import IncidentRepairSummary from 'src/components/dashboard/IncidentRepairSummary.vue';
import CriticalHardTimeReplacement from 'src/components/dashboard/CriticalHardTimeReplacement.vue';
import SpareLocationReport from 'src/components/dashboard/SpareLocationReport.vue'
import MeanTime from 'src/components/dashboard/MeanTime.vue'

const dashboardSetting = ref({});

const layoutUpdatedEvent = () => {
  console.log('auto saved!');

  saveDashboardSetting(true);
};

// load dashboard setting from local storage

function init() {
  if (localStorage.dashboardSetting) {
    console.log('dashboard setting found!');
    let setting = JSON.parse(localStorage.dashboardSetting);
    if (setting['layout'].length != layout.value.length) {
      dashboardSetting.value = {
        layout: layout.value,
      };
      // updateResize()
      localStorage.setItem(
        'dashboardSetting',
        JSON.stringify(dashboardSetting.value)
      );
    }

    layout.value = setting['layout'];
    // selection.value = setting['selection'];
    console.log('dashboard setting loaded!');
  }
  else{
    dashboardSetting.value = {
        layout: layout.value,
      };
      // updateResize()
      localStorage.setItem(
        'dashboardSetting',
        JSON.stringify(dashboardSetting.value)
      );
    
  }
}

init();
// save dashboard layout and selection to local storage
const saveDashboardSetting = (auto: boolean) => {
  dashboardSetting.value = {
    layout: layout.value,
  };
  // updateResize()
  localStorage.setItem(
    'dashboardSetting',
    JSON.stringify(dashboardSetting.value)
  );
  if (auto == false) {
    alert('Dashboard setting saved!');
  }
};

use([
  SVGRenderer,
  CanvasRenderer,
  PieChart,
  BarChart,
  LineChart,
  MapChart,
  SunburstChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
  AxisPointerComponent,
  VisualMapComponent,
  GeoComponent,
]);

provide(THEME_KEY, 'light');

</script>
